<template>
<section v-if="centerCarts">
	<!--<div v-for = "(item, key) in centerCarts">{{ key }}///{{ item }} <br/><br/><br/><br/><br/></div>-->
	<template v-if="$store.state.centerCarts.cmmdtyInfos.length">

		<div class="cartGoods" v-for = "(item, key) in centerCarts.isSales">
			<div class="tit" data-top="0" :class="{self:key==0000000000}">
				<span class="m-cb">
					<input type="checkbox"
						:checked="isCheck(item.list) ?false:true" 
						@click="selAllCenterCart({type: 'shop', item: item.list})" >
					<i></i>
					</span>
				<em></em><span>{{ item.name }}</span>
				<template v-if="item.shopType==1">
					<span v-if="centerCarts.cartHeadInfo.freshFreeAmount" class="postage">满{{centerCarts.cartHeadInfo.freshFreeAmount}}元免运费</span>
					<!-- <span v-else-if="centerCarts.cartHeadInfo.freeShippingCode=='02'" class="postage">免运费</span> -->
				</template>
			</div>
			<template v-for = "(tItem, tKey) in item.list">
				<!-- 目前只接了满减(5)和满返(2)，满返不展示 -->
				<p class="discount" v-if="tKey!='default' && tItem[0].cmmdtyHeadInfo.promotionType == 5">
					<span>满减</span>
					<template v-if="tItem[0].cmmdtyHeadInfo.satisfiedFlag == 'T'">
						已享“{{tItem[0].cmmdtyHeadInfo.promotionDesc}}”
					</template>
					<template v-else-if="tItem[0].cmmdtyHeadInfo.distanceValue">
						再购“{{tItem[0].cmmdtyHeadInfo.distanceValue}}{{tItem[0].cmmdtyHeadInfo.unit}}”, 可享“{{tItem[0].cmmdtyHeadInfo.promotionDesc}}”
					</template>
					<template v-else>{{tItem[0].cmmdtyHeadInfo.promotionDesc}}</template>
				</p>
				<CenterGoodsDetail :list="tItem"></CenterGoodsDetail>
			</template>
		</div>


		<div class="cartGoods" v-if="centerCarts.noSales.length">
			<div class="tit" data-top="0">
				<span>无货商品</span>
				<button @click="delNosale(centerCarts.noSales)">清空无货商品</button>
			</div>
			<CenterGoodsDetail :list="centerCarts.noSales"></CenterGoodsDetail>
		</div>
		<div class="showLaterBg">

		</div>
		<div class="showLater">
			<label for="all">
				<span class="m-cb">
					<input type="checkbox"
						:checked="isAllCheck(centerCarts.isSales) ?false:true" 
						@click="selAllCenterCart({type: 'all', item: centerCarts.isSales })" >
					<i></i>
					</span>
				全选
				<em>合计:<strong>&yen;{{ centerCarts.cartHeadInfo.payAmount }}</strong></em>
				<p>
					<span v-if="parseFloat(centerCarts.cartHeadInfo.promotionAmount)>0">已优惠&yen;{{centerCarts.cartHeadInfo.promotionAmount}}</span>
					<span v-if="parseFloat(centerCarts.cartHeadInfo.deliveryFeeAmount)>0">含运费&yen;{{centerCarts.cartHeadInfo.deliveryFeeAmount}}</span>
					<span v-else>免运费</span>
					<!--没有选中商品时免运费-->
					<!--<span v-if="!Object.values(centerCarts.isSales).some(a=>Object.values(a.list).some(i=>i.some(x => x.mainCmmdtyInfo.mainCmmdtyDetailInfo.tickStatus==1 )))">(免运费)</span>-->
				</p>
			</label>
			<a v-if="centerCarts.tickNumber > 0" href="javascript:void(0)" @click="settlementCenter()">去结算({{ parseInt(centerCarts.tickNumber)>99?'99+':centerCarts.tickNumber }})</a>
			<a v-else href="javascript:void(0)" class="disabled">去结算</a>
		</div>
	</template>
	<error v-else title="购物车空空如也"></error>

</section>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import CenterGoodsDetail from './centerGoodsDetail'
import error from '@/components/error'

export default {
	name: 'cart',
	components: {
		CenterGoodsDetail,
		error
	},
	computed: {
		...mapGetters([
			'centerCarts'
		])
		,obj(){
			return Object.values(this.centerCarts.isSales)
		}
	},
	methods: {
		...mapActions ([
			'selAllCenterCart',
			'settlementCenter',
			'delNosale'
		])
		,isCheck(obj){
			return Object.values(obj).some(i=>i.some(x => x.mainCmmdtyInfo.mainCmmdtyDetailInfo.tickStatus==0 ))
		}
		,isAllCheck(obj){
			return Object.values(obj).some(a=>Object.values(a.list).some(i=>i.some(x => x.mainCmmdtyInfo.mainCmmdtyDetailInfo.tickStatus==0 )))
		}
	},
	mounted (){
		this.$store.dispatch('getCenterProducts')
	},
	created () {
		this.$store.commit('showMask', true)
		//this.$store.commit('showMask', false)
	},
	updated (){
		this.$store.commit('showMask', false)
	}
}
</script>
<style lang="scss" scoped>

	@function _($px) {
		$rem: $px/50;
		@return #{$rem}rem;
	}
	section{
		width: 100%;
		overflow: hidden;
		.cartGoods{
			.discount{
				height: _(88);
				line-height: _(88);
				background-color: #fff;
				border-bottom: 1px solid #e8e8e8;
				span{
					display: inline-block;
					background:#ff7c33;
					border-radius:_(4);
					width:_(68);
					height:_(32);
					line-height:_(32);
					text-align: center;
					color:#fff;
					margin:0 _(28);
				}
				font-size:_(24);
				color:#333333;
			}
		}
	}
	.tit {
		height: 2.24rem;
		line-height: 1.76rem;
		color: #444;
		font-size: .56rem;
		background-color: #f8f8f8;
		padding: 0 .8rem;
		z-index: 8888;
		overflow: hidden;
		border-top: _(22) solid #f1f1f1;
		.postage{
			color: #ff782d;
			font-size: _(24);
			margin-left:_(10) 
		}
		em {
			background-image: url("");
    		display: inline-block;
			width: .72rem;
			height: .72rem;
			background-repeat: no-repeat;
			background-size: contain;
			vertical-align: middle;
			margin-right: .16rem;
		}
		&.self{
			em{
				background-image: url('/static/images/snlogo-48.png');
			}
		}
		button {
			//display: none;
			width: 3.26rem;
			height: 1.2rem;
			float: right;
			border: 1px solid #ff782d;
			color: #ff782d;
			font-size: .48rem;
			text-align: center;
			margin: .28rem 0;
			background: #fff;
			border-radius: 2px;
			outline: none;
		}
	}

	.m-cb {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: .88rem;
		height: .88rem;
		overflow: hidden;
		input[type=checkbox] {
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			width: .88rem;
			height: .88rem;
			cursor: pointer;
		}
		i {
			float: left;
			width: .88rem;
			height: .88rem;
			background: url(../images/unchecked.png) no-repeat;
			background-size: contain;
			margin-right: 5px;
		}
		input[type=checkbox]:checked+i {
		    background-image: url(../images/checked.png)
		}
	}
	.showLaterBg{
		width: 100%;
		height: _(96);
	}
	.showLater{
		position: fixed;
		bottom: 2.1rem;
		width: 100%;
		background-color: #fff;
		height: _(96);
		line-height: _(96);
		border-top: 1px solid #e8e8e8;
		padding-left: 0.8rem;
		a{
			display: inline-block;
			width: _(224);
			float: right;
			background: #ff782d;
			height: 100%;
			text-align: center;
			line-height: _(96);
			color: #fff;
			font-size: .6rem;
			&.disabled {
				background-color: #CCC;
			}
		}
		em {
			position: absolute;
			right: 4.7rem;
			top: _(10);
			font-size: .48rem;
			height: .72rem;
			line-height: 1;
			text-align: right;
			
		}
		strong {
			font-size: .72rem;
			color: #FF782D;
			margin-left: .12rem;
			font-weight: normal;
		}
		p{
			text-align: right;
			position: absolute;
			right: 4.7rem;
			top: .4rem;
			display: inline;
			color: #999;
			height: .72rem;
			font-size: _(20)
		}
	}
</style>

<style lang="scss">
.goodsdetail .vux-1px-tb {
	&:before { display: none;}
	&:after { display: none;}
}
</style>